import { Form, Input, Button, App } from "antd";
import styles from "./index.module.less";
import { eq, get } from "lodash";

export default function Login() {
  const { login } = useApi();
  const { message } = App.useApp();
  const navigate = useNavigate();
  const { setToken } = useUserStore();
  const onFinish = async (values: any) => {
    const res = await login(values);
    if (eq(res.code, 0)) {
      message.success("登录成功");
      setToken(get(res, "data.token", ""));
      navigate("/");
    } else {
      message.error(res.msg);
    }
  };
  return (
    <div className={styles.login}>
      <div className={styles.loginBox}>
        <h1 className={styles.title}>语音房管理端</h1>
        <Form
          className={styles.form}
          onFinish={onFinish}
          layout="vertical"
          size="large"
        >
          <Form.Item
            name="name"
            label="用户名"
            rules={[{ required: true, message: "请输入用户名" }]}
          >
            <Input placeholder="请输入用户名" minLength={2} maxLength={20} />
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[{ required: true, message: "请输入密码" }]}
          >
            <Input.Password
              placeholder="请输入密码"
              minLength={2}
              maxLength={20}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
